<template>
	<view class="page">
        <nav-bar title="店铺入驻"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="input_form_box">
			<view class="input_title">基本信息</view>
			<view class="input_box">
				<view class="name">推荐码</view>
				<view class="input_info" v-if="userInfo.recommendPhone">{{userInfo.recommendPhone}}</view>
				<view class="input_info" v-else><input type="number" v-model="recommendPhone" maxlength="11" placeholder="请输入推荐人手机号" /></view>
			</view>
			<view class="input_box line">
				<view class="name required">店铺名称</view>
				<view class="input_info"><input type="text" v-model="hotelName" placeholder="请输入店铺名称" /></view>
			</view>
			<view class="input_box">
				<view class="name required">店铺位置</view>
				<view class="select_info" @click="onAreaSelect">
					<text class="value" v-if="addressInfo.address">{{ addressInfo.name }}</text>
					<text class="select" v-else="">请选择位置</text>
				</view>
			</view>
			<view class="input_box">
				<view class="name required">详细地址</view>
				<view class="input_info"><input type="text" v-model="address" placeholder="请输入店铺详细地址" /></view>
			</view>
		</view>
		<view class="input_form_box marginTop">
			<view class="input_title">负责人信息</view>
			<view class="input_box line">
				<view class="name required">负责人姓名</view>
				<view class="input_info"><input type="text" v-model="dutyName" placeholder="请输入负责人姓名" /></view>
			</view>
			<view class="input_box">
				<view class="name required">负责人手机</view>
				<view class="input_info"><input type="number" v-model="dutyPhone" placeholder="请输入负责人手机号" /></view>
			</view>
			<view class="input_box">
				<view class="name required">负责人身份证照</view>
				<view class="id_card_box">
					<view @click="onUnloadImg(1000)">
						<image v-if="dutyCardFront" :src="dutyCardFront" mode="aspectFill"></image>
						<image v-else="" src="../../static/icon/theme/ic_upload_portrait.png" mode="aspectFit"></image>
					</view>
					<view @click="onUnloadImg(2000)">
						<image v-if="dutyCardReverse" :src="dutyCardReverse" mode="aspectFill"></image>
						<image v-else="" src="../../static/icon/theme/ic_upload_nationalemblem.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="input_form_box marginTop">
			<view class="input_title">经营资质信息</view>
			<view class="input_box line">
				<view class="name required">执照名称</view>
				<view class="input_info"><input type="text" v-model="licenseName" placeholder="请输入执照名称" /></view>
			</view>
			<view class="input_box">
				<view class="name required">执照注册号</view>
				<view class="input_info"><input type="text" v-model="licenseNo" placeholder="请输入执照社会统一代码" /></view>
			</view>
			<view class="input_box">
				<view class="name required">执照照片</view>
				<view class="id_card_box">
					<view @click="onUnloadImg(3000)">
						<image v-if="licenseImg" :src="licenseImg" mode="aspectFill"></image>
						<image v-else="" src="../../static/icon/theme/icon_license.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="protocol">
			<view class="active"></view>
			我已经阅读并了解了<text @click="onPageJump('/pages/user/protocol?type=1505')">《合作协议》</text>
		</view>
		<view class="form_but"><button class="active" @click="onSubmit">提交</button></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				// 店铺名称
				hotelName: '',
				//店铺地址信息
				addressInfo: {},
				//详细地址
				address: '',
				recommendPhone: '',
				// 负责人姓名
				dutyName: '',
				// 负责人手机号
				dutyPhone: '',
				// 负责人身份证正面照
				dutyCardFront: '',
				// 负责人身份证反面照
				dutyCardReverse: '',
				// 营业执照图片
				licenseImg: '',
				//营业执照名称
				licenseName: '',
				//营业执照号码
				licenseNo: '',
				// 品牌授权书
				brandLicense: "",
				// 生产许可证
				productionLicence: "",
			};
		},
		//第一次加载
		onLoad(e) {
			// #ifdef MP-WEIXIN
			uni.authorize({
				scope: 'scope.userLocation'
			});
			// #endif
			this.pageData();
		},
		computed: {
			...mapState(['selectAddress', 'userInfo'])
		},
		//页面显示
		onShow() {
			// #ifdef H5 || APP-PLUS
			if (this.selectAddress.latitude) {
				this.addressInfo = this.selectAddress;
			}
			// #endif
		},
		//方法
		methods: {
			//上传图片
			// type = 1000 负责人身份证正面照
			// type = 2000 负责人身份证反面照
			// type = 3000 营业执照图片
			onUnloadImg(type) {
				this.$http.qnImgUpload({
					count: 1
				}).then(res => {
					if (type == 1000) {
						this.dutyCardFront = res[0];
					} else if (type == 2000) {
						this.dutyCardReverse = res[0];
					} else if (type == 3000) {
						this.licenseImg = res[0];
					} else if (type == 4000) {
						this.brandLicense = res[0];
					} else if (type == 5000) {
						this.productionLicence = res[0];
					}
				});
			},
			pageData() {

			},
			//位置选择
			onAreaSelect() {
				// #ifdef MP-WEIXIN
				uni.getSetting({
					success: res => {
						// 定位权限是否为打开
						if (res.authSetting['scope.userLocation']) {
							uni.chooseLocation({
								success: res => {
									this.addressInfo = res;
								}
							});
						} else {
							uni.showModal({
								title: '提示',
								content: '请先在设置页面打开“位置信息”使用权限',
								confirmText: '去设置',
								cancelText: '再逛会',
								success: res => {
									if (res.confirm) {
										uni.openSetting();
									}
								}
							});
						}
					}
				});
				// #endif
				// #ifdef APP-PLUS
				uni.navigateTo({
					url: '/pages/my/address/addressSelect'
				});
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url: '/pages/my/address/addressSelect'
				});
				// #endif
			},
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			onSubmit() {
				if (this.hotelName == '') {
					uni.showToast({
						title: '请输入店铺名称',
						icon: 'none'
					});
					return;
				}
				if (!this.addressInfo.latitude) {
					uni.showToast({
						title: '请选择店铺地址位置',
						icon: 'none'
					});
					return;
				}
				if (this.address == '') {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					});
					return;
				}
				if (this.recommendPhone && !this.$base.phoneRegular.test(this.recommendPhone)) {
					uni.showToast({
						title: '推荐人手机号格式不正确',
						icon: 'none'
					});
					return;
				}
				if (this.dutyName == '') {
					uni.showToast({
						title: '请输入负责人姓名',
						icon: 'none'
					});
					return;
				}
				if (this.dutyPhone == '') {
					uni.showToast({
						title: '请输入负责人手机号',
						icon: 'none'
					});
					return;
				}
				if (!this.$base.phoneRegular.test(this.dutyPhone)) {
					uni.showToast({
						title: '负责人手机号格式不正确',
						icon: 'none'
					});
					return;
				}
				if (this.dutyCardFront == '') {
					uni.showToast({
						title: '请上传负责人身份证人像面',
						icon: 'none'
					});
					return;
				}
				if (this.dutyCardReverse == '') {
					uni.showToast({
						title: '请上传负责人身份证国徽面',
						icon: 'none'
					});
					return;
				}
				if (this.licenseName == '') {
					uni.showToast({
						title: '请输入营业执照名称',
						icon: 'none'
					});
					return;
				}
				if (this.licenseNo == '') {
					uni.showToast({
						title: '请输入营业执照号码',
						icon: 'none'
					});
					return;
				}
				if (this.licenseImg == '') {
					uni.showToast({
						title: '请上传营业执照',
						icon: 'none'
					});
					return;
				}
				let httpData = {
					hotelName: this.hotelName,
					address: this.addressInfo.address + this.address,
					latitude: this.addressInfo.latitude,
					longitude: this.addressInfo.longitude,
					dutyName: this.dutyName,
					dutyPhone: this.dutyPhone,
					dutyCardFront: this.dutyCardFront,
					dutyCardReverse: this.dutyCardReverse,
					licenseName: this.licenseName,
					licenseNo: this.licenseNo,
					licenseImg: this.licenseImg
				};
				if (this.recommendPhone) {
					httpData.recommendPhone = this.recommendPhone;
				}
				if (this.brandLicense) {
					httpData.brandLicense = this.brandLicense;
				}
				if (this.productionLicence) {
					httpData.productionLicence = this.productionLicence;
				}
				this.$http.post('api/settled/v1/submit_mall', httpData).then(res => {
					uni.showModal({
						title: '入驻提示',
						content: '入驻信息提交成功！等待工作人员审核~',
						showCancel: false,
						success: res => {
							uni.switchTab({
								url: "../home/home"
							});
						}
					});
				});
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.page {
		padding-top: 20rpx;
	}

	.marginTop {
		margin-top: 20rpx;
	}

	.id_card_box {
		width: 100%;
		display: flex;
		justify-content: center;
		padding-bottom: 30rpx;

		>view {
			width: 300rpx;
			height: 195rpx;

			&:nth-child(2) {
				margin-left: 40rpx;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
